{extend name="common/pub/base" /}

{block name="main"}
{include file="common/pub/breadcrumb" /}
<el-form :model="form" :rules="rules"  ref="form" label-width="auto" >
    <el-row :gutter="20">
        <el-col :span="8">
            <div class="grid-content bg-purple">
                <el-form-item label="控制器名称" prop="controller_name">
                    <el-input v-model="form.controller_name"></el-input>
                </el-form-item>
            </div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple">
                <span style="color: #cccccc">如果是多层控制器，中间使用英文 . 号隔开</span>
            </div>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="8">
            <div class="grid-content bg-purple">
                <el-form-item label="菜单名称" prop="menu_name">
                    <el-input v-model="form.menu_name"></el-input>
                </el-form-item>
            </div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple">
                <span style="color: #cccccc">父级菜单名称</span>
            </div>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="8">
            <div class="grid-content bg-purple">
                <el-form-item label="无限极表格">
                    <el-radio-group v-model="form.tree_table">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple">
                <span style="color: #cccccc">无限极表格父级字段必须为:pid</span>
            </div>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="8">
            <div class="grid-content bg-purple">
                <el-form-item label="生成路由">
                    <el-radio-group v-model="form.route">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple">
                <span style="color: #cccccc">自动生成权限菜单</span>
            </div>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="8">
            <div class="grid-content bg-purple">
                <el-form-item label="展开全部">
                    <el-radio-group v-model="form.expand_all">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple">
                <span style="color: #cccccc">只有无限极表格时才选择展开</span>
            </div>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="8">
            <div class="grid-content bg-purple">
                <el-form-item label="渲染按钮">
                    <el-checkbox-group v-model="form.button" >
                        <el-checkbox v-for="item in buttons" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple">
                <span style="color: #cccccc">渲染操作事件，一般通用模块全选即可</span>
            </div>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="8">
            <div class="grid-content bg-purple">
                <el-form-item label="后台钩子">
                    <el-checkbox-group v-model="form.plugins" >
                        <el-checkbox v-for="item in plugins" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple">
                <span style="color: #cccccc">后台插件，Markdown 一个模块建议只设置一个输入框为markdown</span>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="8">
            <div class="grid-content bg-purple">
                <el-form-item label="字段设置">
                    <el-button type="success" @click="handleAddField">增加字段</el-button>
                    <div style="list-style: none; padding: 0;margin-bottom: 20px;" id="jsonPre"></div>
                </el-form-item>
            </div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple">
                <span style="color: #cccccc">字段配置非常重要，是创建数据表的依据。</span>
            </div>
        </el-col>
    </el-row>

    <el-button type="primary" @click="handleSubmit('form')">确认添加</el-button>
</el-form>

<el-dialog title="添加\修改字段" v-model="dialogFieldVisible">
    <el-form :model="default_fields"  ref="default_fields" :rules="fields_rules" label-width="auto">
        <h4>基础配置</h4>
        <el-form-item label="字段提示" prop="label">
            <el-input v-model="default_fields.label"></el-input>
        </el-form-item>

        <el-form-item label="字段类型" prop="type">
            <el-select v-model="default_fields.type" placeholder="请选择字段类型" @change="handleTypes">
                <el-option v-for="item in types" :label="item.name" :value="item.type"></el-option>
            </el-select>
        </el-form-item>

        <div v-if="box==true">
            <el-form-item label="绑定label">
                <el-input v-model="default_fields.prop.bind_label"></el-input>
            </el-form-item>

            <el-form-item label="绑定value">
                <el-input v-model="default_fields.prop.bind_value"></el-input>
            </el-form-item>


            <el-form-item label="选项值(options)">
                <el-input v-model="default_fields.prop.options" type="textarea" :rows="4"></el-input>
                <p>为一个json字符串，[{"id":1,"name":"是"},{"id":2,"name":"否"0}],json里的id,name 需要与绑定label,绑定value一致</p>
            </el-form-item>

            <el-form-item label="回调类">
                <el-input v-model="default_fields.prop.callback[0]"  :rows="4"></el-input>
                <p>回调函数的优先级比options低，一般设置其一即可。例如："\\app\\admin\\model\\Category"</p>
            </el-form-item>

            <el-form-item label="回调方法">
                <el-input v-model="default_fields.prop.callback[1]"  :rows="4"></el-input>
                <p>回调方法，需要自己实现，例如：getPidSelect</p>
            </el-form-item>
        </div>

        <el-form-item label="字段名称" prop="key">
            <el-input v-model="default_fields.key"></el-input><p style="color: red">该值为数据库表字段，请使用英文字符</p>
        </el-form-item>

        <el-form-item label="默认值">
            <el-input v-model="default_fields.value"></el-input>
        </el-form-item>

        <el-form-item label="输入提示">
            <el-input v-model="default_fields.placeholder"></el-input>
        </el-form-item>


        <h4>参数配置</h4>
        <el-form-item label="表格显示">
            <el-radio-group v-model="default_fields.prop.table_show">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
            <p style="color: red">渲染表单时是否显示该列，选择是：显示，否则不显示</p>
        </el-form-item>

        <el-form-item label="查询渲染">
            <el-select v-model="default_fields.prop.search" placeholder="请选择查询类型">
                <el-option  label="过滤查询" value=""></el-option>
                <el-option  label="模糊查询" value="like"></el-option>
                <el-option  label="等值查询" value="="></el-option>
                <el-option  label="大于查询" value=">"></el-option>
                <el-option  label="小于查询" value="<"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="必填验证">
            <el-radio-group v-model="default_fields.prop.is_null">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="焦点事件">
            <el-select v-model="default_fields.prop.trigger" placeholder="请选择查询类型">
                <el-option  label="blur" value="blur"></el-option>
                <el-option  label="change" value="change"></el-option>
            </el-select>
        </el-form-item>

    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFieldVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleField('default_fields')">确 定</el-button>
    </span>
    </template>
</el-dialog>

{/block}

{block name="script"}
<script type="text/javascript" src="/static/js/renderjson.js"></script>

<script>
    const data = {
        default_fields:{
            type:"Input",
            label:"",
            key:"",
            value:"",
            placeholder:"",
            prop:{
                table_show:true,
                search:"=",
                is_null:false,
                trigger:"blur",
                bind_label:"name",
                bind_value:"id",
                options:'',
                ext:{},
                callback:["",""]
            }
        },
        types:[
            {
                type:'Input',
                name:'单行文本',
                box:false,
            },
            {
                type:'Textarea',
                name:'多行文本',
                box:false,
            },
            {
                type:'Markdown',
                name:'Markdown编辑器',
                box:false,
            },
            {
                type:'Number',
                name:'数字文本',
                box:false,
            },
            {
                type:'Password',
                name:'密码',
                box:false,
            },
            {
                type:'Image',
                name:'单图',
                box:false,
            },
            {
                type:'Radio',
                name:'单选框',
                box:true,
            },
            {
                type:'Select',
                name:'下拉选择',
                box:true,
            },
            {
                type:'CascaderRadio',
                name:'分类级联',
                box:true,
            },
            {
                type:'CascaderCheckBox',
                name:'复选级联',
                box:true,
            },

        ],
        dialogFieldVisible:false,
        form:{
            route:true,
            menu_name:'',
            controller_name:'',
            tree_table:false,
            expand_all:false,
            button:['add', 'edit','delete','deletes','search','reset'],
            plugins:['images'],
            fields:[],
        },
        fields_rules:{
            type:[
                { required: true, message: '请选择字段类型', trigger: 'change' }
            ],
            label:[
                { required: true, message: '请 输入字体提示', trigger: 'change' }
            ],
            key:[
                { required: true, message: '请输入字段名称', trigger: 'change' }
            ]
        },
        rules:{
            controller_name: [
                { required: true, message: '控制器名称必填', trigger: 'blur' }
            ],
            menu_name: [
                { required: true, message: '菜单名称必填', trigger: 'blur' }
            ]
        },
        plugins:[
            {
                name:"选择图库",
                value:"images"
            },
            {
                name:"Markdown编辑器",
                value:"markdown"
            }
        ],
        buttons: [
            {
                name:"添加记录",
                value:"add"
            },
            {
                name:"修改记录",
                value:"edit"
            },
            {
                name:"删除单行",
                value:"delete"
            },
            {
                name:"批量删除",
                value:"deletes"
            },
            {
                name:"查询表单",
                value:"search"
            },
            {
                name:"重置查询",
                value:"reset"
            }
        ],
        isIndeterminate: true,
        box:false,
        api:{
            post:"{:url('general.tool/post')}"
        }
    }

    function f() {
        return {
            handleAddField:function () {
                this.dialogFieldVisible = true
                //初始化
                this.default_fields = {
                    type:"Input",
                        label:"",
                        key:"",
                        value:"",
                        placeholder:"",
                        prop:{
                        table_show:true,
                            search:"=",
                            is_null:false,
                            trigger:"blur",
                            bind_label:"name",
                            bind_value:"id",
                            options:'',
                            ext:{},
                        callback:["",""]
                    }
                }
            },
            handleSubmit:function (form) {
                let _this = this
                _this.$refs[form].validate((valid) => {
                    if (valid) {
                        axios.post(_this.api.post,_this.form).then(function (response) {
                            if(response.data.code == 200){
                                _this.$message.success(response.data.msg)
                            }else{
                                _this.$message.error(response.data.msg);
                            }
                        }).catch(function (error) {
                            console.log(error)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleField:function (default_fields) {
                let _this = this
                _this.$refs[default_fields].validate((valid) => {
                    if (valid) {
                        _this.form.fields.push(_this.default_fields)
                        console.log(_this.form.fields)
                        document.getElementById("jsonPre").appendChild(renderjson(_this.default_fields));
                        _this.dialogFieldVisible = false
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleTypes:function (e) {
              let _this = this
              for (let i=0; i< _this.types.length;i++){
                  if(_this.types[i].type == e && _this.types[i].box == true){
                      _this.box = true
                      if(e == 'CascaderRadio'){
                          _this.default_fields.prop.callback[0] = '\\app\\admin\\model\\Category'
                          _this.default_fields.prop.callback[1] = "getPidSelect"
                      }
                      return;
                  }else {
                      _this.box= false
                  }
              }
            },
            init:function () {
                renderjson.set_icons('+', '-');
                renderjson.set_show_to_level(2);
            }
        }
    }
</script>
{/block}